<template>
  <view class="notice-detail">
    <view v-if="notice" class="notice-content">
      <!-- 公告标题 -->
      <view class="notice-header">
        <view class="notice-title">{{ notice.title }}</view>
        <view class="notice-meta">
          <view class="meta-item">
            <text class="meta-label">发布时间：</text>
            <text class="meta-value">{{ formatTime(notice.createTime) }}</text>
          </view>
          <view class="meta-item">
            <text class="meta-label">查看次数：</text>
            <text class="meta-value">{{ notice.viewCount }}</text>
          </view>
          <view v-if="notice.priority > 0" class="priority-tag" :class="getPriorityClass(notice.priority)">
            {{ getPriorityText(notice.priority) }}
          </view>
          <view v-if="notice.isTop === 1" class="top-tag">
            置顶
          </view>
        </view>
      </view>
      
      <!-- 公告内容 -->
      <view class="notice-body">
        <rich-text :nodes="notice.content"></rich-text>
      </view>
    </view>
    
    <!-- 加载状态 -->
    <view v-else-if="loading" class="loading">
      <uni-load-more status="loading" :content-text="loadingText"></uni-load-more>
    </view>
    
    <!-- 错误状态 -->
    <view v-else class="error">
      <view class="error-text">{{ errorMessage || '公告不存在或已删除' }}</view>
      <button class="retry-btn" @click="loadNoticeDetail">重新加载</button>
    </view>
  </view>
</template>

<script>
import { getNoticeDetail } from '@/api/order.js'

export default {
  data() {
    return {
      notice: null,
      loading: true,
      errorMessage: '',
      loadingText: {
        contentdown: '上拉显示更多',
        contentrefresh: '正在加载...',
        contentnomore: '没有更多数据了'
      }
    }
  },
  
  onLoad(options) {
    if (options.id) {
      this.noticeId = options.id
      this.loadNoticeDetail()
    } else {
      this.loading = false
      this.errorMessage = '缺少公告ID参数'
    }
  },
  
  methods: {
    async loadNoticeDetail() {
      try {
        this.loading = true
        this.errorMessage = ''
        
        const response = await getNoticeDetail(this.noticeId)
        this.notice = response.data
        
        // 设置页面标题
        if (this.notice && this.notice.title) {
          uni.setNavigationBarTitle({
            title: this.notice.title.length > 10 ? this.notice.title.substring(0, 10) + '...' : this.notice.title
          })
        }
      } catch (error) {
        console.error('加载公告详情失败:', error)
        this.errorMessage = '加载失败，请稍后重试'
      } finally {
        this.loading = false
      }
    },
    
    formatTime(timeStr) {
      if (!timeStr) return ''
      const date = new Date(timeStr)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },
    
    getPriorityText(priority) {
      const priorityMap = {
        1: '重要',
        2: '紧急'
      }
      return priorityMap[priority] || ''
    },
    
    getPriorityClass(priority) {
      const classMap = {
        1: 'priority-important',
        2: 'priority-urgent'
      }
      return classMap[priority] || ''
    }
  }
}
</script>

<style scoped>
.notice-detail {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.notice-content {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.notice-header {
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.notice-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  line-height: 1.4;
  margin-bottom: 20rpx;
}

.notice-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20rpx;
}

.meta-item {
  display: flex;
  align-items: center;
  font-size: 26rpx;
}

.meta-label {
  color: #999;
}

.meta-value {
  color: #666;
}

.priority-tag {
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  color: #fff;
}

.priority-important {
  background-color: #ff9500;
}

.priority-urgent {
  background-color: #ff3b30;
}

.top-tag {
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  font-size: 22rpx;
  background-color: #007aff;
  color: #fff;
}

.notice-body {
  padding: 30rpx;
  font-size: 30rpx;
  line-height: 1.6;
  color: #333;
}

.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400rpx;
}

.error {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 400rpx;
}

.error-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.retry-btn {
  padding: 20rpx 40rpx;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  font-size: 28rpx;
}
</style>